<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>注册</title>  
    <style>  
        body {  
            font-family: 'Microsoft YaHei', sans-serif;  
            background-color: #e0e0e0;  
            display: flex;  
            justify-content: center;  
            align-items: flex-start;  
            height: 100vh;  
            margin: 0;  
            margin-top: 5vh;  
        }  

        .register {  
            background: #ffffff;  
            padding: 30px;  
            border-radius: 12px;  
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
            width: 360px;  
            text-align: center;  
            box-sizing: border-box;  
        }  

        h1 {  
            margin-bottom: 30px;  
            color: #2c3e50;  
        }  

        label {  
            display: block;  
            margin-bottom: 8px;  
            text-align: left;  
            color: #555;  
            font-size: 14px;  
        }  

        input[type="text"],  
        input[type="password"] {  
            width: 100%;  
            padding: 12px;  
            margin-bottom: 20px;  
            border: 1px solid #d3d3d3;  
            border-radius: 6px;  
            box-sizing: border-box;  
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);  
        }  

        button {  
            width: 100%;  
            padding: 12px;  
            background-color: #044599;  
            color: #ffffff;  
            border: none;  
            border-radius: 6px;  
            cursor: pointer;  
            font-size: 16px;  
            transition: background-color 0.3s ease;  
        }  

        button:hover {  
            background-color: #aec9ed;  
        }  

        button:active {  
            background-color: #044599;  
        }  

        .footer {  
            margin-top: 20px;  
            font-size: 14px;  
            color: #999;  
        }  

        .login-link {  
            margin-top: 20px;  
            font-size: 14px;  
        }  

        .login-link a {  
            color: #7591ef;  
            text-decoration: none;  
        }  

        .login-link a:hover {  
            text-decoration: underline;  
        }  
    </style>  
</head>  

<body>  
    <div class="register">  
        <h1>注册</h1>  
        <form action="/register" method="post">  
            <label for="username">用户名：</label>  
            <input type="text" id="username" name="username" required pattern=".{3,16}" oninvalid="this.setCustomValidity('用户名长度需在3到16个字符之间')" oninput="this.setCustomValidity('')">  
            <label for="password">密码：</label>  
            <input type="password" id="password" name="password" required>  
            <button type="submit">注册</button>  
        </form>  
        <div class="login-link">  
            <p>已经有账户？<a href="/">登录</a></p>  
        </div>  
    </div>  
</body>  

</html>  